<template>
  <div>
    <ListHead />
    <el-main :xs="24" :sm="24" :md="24" :lg="24">
      <div class="edit-step2">
        <div class="product">
          <ul>
            <li v-for="(item, index) in product" :key="index">
              <div class="typebg">
                <div class="context">
                  <p class="type">{{ item.group_name }}</p>
                  <p class="message">{{ item.description }}</p>
                </div>
              </div>
              <div
                class="btn"
                @click="createNow(item.group_id, item.group_name)"
              >
                <span>立即创建</span>
                <div class="imgbox"></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import { GETGROUP } from "./service";

export default {
  components: {
    ListHead: () => import("publicCom/ListHead")
  },
  data() {
    return {
      product: []
    };
  },
  created() {
    this.getRroup();
  },
  methods: {
    async getRroup() {
      await GETGROUP().then(({ code, data, msg }) => {
        if (code === 200) {
          this.product = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    createNow(groupId, groupName) {
      this.$router.push({
        name: "step3",
        params: { group_id: groupId, group_name: groupName }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.edit-step2 {
  background: #fff;
  padding: 30px;
  -moz-box-shadow: 0px 0px 10px #e3e3e3;
  -webkit-box-shadow: 0px 0px 10px #e3e3e3;
  box-shadow: 0px 0px 10px #e3e3e3;
  box-sizing: border-box;
  border-radius: 6px;
  .product {
    h2 {
      font-size: 24px;
    }
    ul {
      overflow: hidden;
      li:nth-child(1) {
        .typebg {
          background: url("http://oss.ztwlxx.cn/step2sc.png");
          background-size: 100% 100%;
        }
      }
      li:nth-child(2) {
        .typebg {
          background: url("http://oss.ztwlxx.cn/step2wz.png");
          background-size: 100% 100%;
        }
      }
      li:nth-child(3) {
        .typebg {
          background: url("http://oss.ztwlxx.cn/step2cy.png");
          background-size: 100% 100%;
        }
      }
      li:nth-child(4) {
        .typebg {
          background: url("http://oss.ztwlxx.cn/step2jd.png");
          background-size: 100% 100%;
        }
      }
      li:nth-child(5) {
        .typebg {
          background: url("http://oss.ztwlxx.cn/step2my.png");
          background-size: 100% 100%;
        }
      }
      li:nth-child(6) {
        .typebg {
          background: url("http://oss.ztwlxx.cn/step2wm.png");
          background-size: 100% 100%;
        }
      }
      li:nth-child(7) {
        .typebg {
          background: url("http://oss.ztwlxx.cn/step2jy.png");
          background-size: 100% 100%;
        }
      }
      li {
        float: left;
        margin: 30px 50px;
        font-size: 14px;
        width: 234px;
        .typebg {
          width: 300px;
          height: 123px;
          background: #f0f0f0;

          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          .context {
            width: 300px;
            height: 123px;
            // padding: 10px 0 0 15px;
          }
          .type {
            font-size: 28px;
            color: #ffffff;
            text-align: left;
            padding: 10px 0 0 10px;
            box-sizing: border-box;
          }
          .message {
            margin: 10px 0;
            font-size: 12px;
            color: #fff;
            padding-left: 10px;
            box-sizing: border-box;
          }
        }
        .btn {
          width: 300px;
          height: 47px;
          line-height: 47px;
          text-align: center;
          box-sizing: border-box;
          border: 1px solid #d9d9d9;
          color: #ccc;
          background: #fff;
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
          cursor: pointer;
          .imgbox {
            width: 20px;
            height: 20px;
            float: right;
            margin-right: 10px;
            margin-top: 13px;
            background: url("http://oss.ztwlxx.cn/step2bg.png");
            background-size: 100% 100%;
          }
        }
        .btn:hover {
          background: #4c94fc;
          border: 1px solid #4c94fc;
          color: #fff;
        }
      }
    }
  }
}
</style>
